<template>
  <div class="bgc-default pad-20">
    <div class="tab-style-default tab-sticky">
      <el-tabs v-model="appType" @tab-click="handleClick">
        <el-tab-pane label="云店小程序" name="10"></el-tab-pane>
        <el-tab-pane label="批发小程序" name="11"></el-tab-pane>
        <el-tab-pane label="主播小程序" name="13"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="bg-color-white pad-l-20 pad-r-20 mar-t-15 pad-t-15">
      <div class="pad-t-5">
        <div style="height: 115px; line-height: 2.3; background-color: #ECF5FF" class="text-align-l pad-l-20 pad-t-5">
          <span style="font-size: 16px" class="font-w">使用需知：</span><br/>
          <span>1.使用微信小程序订阅消息/微信公众号消息推送，需先获取小程序公众平台的订阅消息ID/微信公众平台的消息模板ID进行配置。<a style="color: #2d8cf0" href="https://mp.weixin.qq.com/" target="_blank">去配置</a></span><br/>
          <span>2.每个小程序/公众号可最多同时启用25个模板ID，小程序/公众号已添加的模板一旦达到25个，可能无法正常推送消息，此时需进入小程序公众平台删除部分不启用的模板。</span>
        </div>
      </div>
      <el-radio-group v-model="messageType" class="pad-t-20" @change="messageClick">
        <el-radio-button label="">全部通知</el-radio-button>
        <el-radio-button label="1">订单</el-radio-button>
        <el-radio-button label="2" v-if="appType == 10 || appType == 11">售后</el-radio-button>
        <el-radio-button label="4" v-if="appType == 10">优惠券</el-radio-button>
        <el-radio-button label="3" v-if="appType == 10">店播</el-radio-button>
        <el-radio-button label="7" v-if="appType == 10">店主权限</el-radio-button>
        <el-radio-button label="6" v-if="appType == 10">主播权限</el-radio-button>
        <el-radio-button label="5" v-if="appType == 10">小B客服</el-radio-button>
      </el-radio-group>
      <div class="table-container pad-t-20">
        <el-table ref="multipleTable" :data="entityList" v-loading="listLoading"
                  element-loading-text="加载中" style="width: 100%">
          <el-table-column width="100px" label="所属" align="center" prop="messageType">
            <template slot-scope="scope">
              <div>{{ dict.messageType[scope.row.messageType] }}</div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="通知类型" align="center" prop="ascriptionType">
            <template slot-scope="scope">
              <div>{{ dict.ascriptionType[scope.row.ascriptionType] }}</div>
            </template>
          </el-table-column>
          <el-table-column min-width="300px" label="推送规则" prop="pushRules"></el-table-column>
          <el-table-column width="200px" label="小程序订阅消息">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.appFlag" @change="switchChange(scope.row)" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              <span v-if="!scope.row.appFlag">禁用</span>
              <span v-if="scope.row.appFlag">启用</span>
              <a style="color: #2d8cf0" @click="clickFormVisible(scope.row, 'app')">设置</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!--设置消息模板-->
    <el-dialog title="设置消息模板" :visible.sync="formVisible" :close-on-press-escape="true" width="800px">
      <el-form :model="entity" label-position="right" label-width="100px">
        <el-form-item label="示例">
          <div class="v-align-c">
            <img class="mar-r-23" style="width: 560px;" :src="entity.miniTemplateImageUrl"/>
          </div>
        </el-form-item>
        <el-form-item label="服务类目">
          <div>{{entity.miniCategoryName}}</div>
        </el-form-item>
        <el-form-item label="模板ID">
          <div>
            <el-input v-model="entity.miniMadeId" placeholder="请输入云店小程序模板ID" maxlength="100" style="width: 560px;"/>
          </div>
        </el-form-item>
        <el-form-item label="详细内容">
          <div>
            <el-input v-model="entity.miniMessageConfig" type="textarea" :rows="6" style="width: 560px;"/>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false">取消</el-button>
        <el-button type="primary" @click="button_ok">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
  .margin-left-39 {
    margin-left: -39px;
  }
  .picture{
    width: 250px;
    height: 258px;
    display: block;
  }
  .tab-sticky {
    position: sticky;
    top: 0px;
    left: 20px;
    width: calc(100% + 40px);
    background: white;
    z-index: 1000;
    padding-top: 10px;
    padding-left: 17px;
    margin-left: -20px;
    margin-top: -20px;
    /deep/ .el-tabs__header{
      margin: 0;
    }
  }
</style>

<script>
  import { listEnterpriseMessageConfig, saveEnterpriseMessageConfig } from '@/api/user/enterpriseMessageConfig'
  import { getDictByGroupName } from '@/api/common/common'
  import { getToken } from '@/utils/auth'

  export default {
    data() {
      return {
        entityList: [],
        listLoading: false,
        formVisible: false,
        formType: '0',
        appType: '10',
        messageType: '',
        entityListQuery: {
          appType: '10',
          messageType: '',
          enterpriseId: this.getEnterpriseId()
        },
        entity: {},
        token: {},
        miniStatus: true,
        dict: {
          messageType: {},
          ascriptionType: {}
        }
      }
    },
    created() {
      getDictByGroupName('EnterpriseMessageConfigDTO').then(response => {
        this.dict = response.data
      })
      this.initDate()
      this.token = { accessToken: getToken() }
    },
    methods: {
      handleClick() {
        this.initDate()
      },
      messageClick() {
        this.initDate()
      },
      initDate() {
        this.listLoading = true
        this.entityList = []
        this.entityListQuery['messageType'] = this.messageType
        this.entityListQuery['appType'] = this.appType
        this.entityListQuery.enterpriseId = this.getEnterpriseId()
        listEnterpriseMessageConfig(this.entityListQuery).then(response => {
          if (response.isError) return
          this.entityList = response.data
          if (!response.data) {
            response.data.forEach(item => {
              const data = item
              data.appFlag = item.miniStatus === 1
              this.entityList.push(data)
            })
          }
          this.listLoading = false
        })
      },
      clickFormVisible(row, status) {
        const obj = JSON.parse(JSON.stringify(row))
        this.entity = obj
        this.formVisible = true
      },
      button_ok() {
        this.entity.enterpriseId = this.getEnterpriseId()
        this.saveDate(this.entity)
      },
      switchChange(item) {
        const data = item
        if (item.appFlag) {
          data['miniStatus'] = 1
        } else {
          data['miniStatus'] = 0
        }
        data['enterpriseId'] = this.getEnterpriseId()
        saveEnterpriseMessageConfig(data).then(response => {
          if (response.isError) return
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.formVisible = false
        })
      },
      saveDate(item) {
        saveEnterpriseMessageConfig(item).then(response => {
          if (response.isError) return
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.formVisible = false
          this.initDate()
        })
      }
    }
  }
</script>
